<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文献资源管理系统-登录页面</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="文献资源管理系统-登录页面">
<meta name="description" content="文献资源管理系统-登录页面">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
#button {
  background-color: #33cabb; 
  border-left-color:#33cabb;
  border-right-color:#33cabb;
  border-top-color:#33cabb;
  border-bottom-color:#33cabb;
}
</style>
</head>
  
<body>
<div class="row lyear-wrapper" id="app">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a > <img alt="light year admin" src="images/logo nstl3(1).jpg"> </a>
      </div>
      <form action="#!" method="post">
        <div class="form-group has-feedback feedback-left">
          <input type="text" placeholder="请输入您的用户名" v-model="user.userName" class="form-control" name="username" id="username" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" v-model="user.userPwd" class="form-control" id="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        
        <div class="form-group">
          <el-button id="button" class="btn btn-block btn-primary" type="primary" style="width:100%;" @click.native.prevent="login" :loading="loading" >登录</el-button>
        </div>
      </form>
      <hr>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">;</script>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script> 
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> 


    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script>
    new Vue({
      el:"#app",
      data:{
        user:{},
        id:"",
        loading: false,
      },
      created () {
        
      },
      methods: {
       
        login(){
          this.loading=true;
          setTimeout(() => {
          this.loading = false;
       
          axios.post("http://localhost:8090/userlogin",this.user)
          .then(res => {
            window.localStorage.setItem("userid",res.data.data.userId);
            window.localStorage.setItem("username",res.data.data.userName);

              this.$message({
              message: '恭喜你，登陆成功！！',
              type: 'success'
              });

              setTimeout(function(){
                location="index.html"
              }, 500);
              
            console.log(res)
          })
          .catch(err => {
              this.$message.error('登录失败！！！请重新登陆！！！');
            console.error(err); 
          })
        }, 1000);
        }
      }
    })
  </script>
</html>